<script setup lang="ts">
import { computed, nextTick, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import setting from "@/setting";
import {
  UseSettingStore,
  UseRouterStore,
  UseUserStore,
} from "@/store/modules/index.ts";
import { ElNotification } from "element-plus";

let menuRoutersStore = UseRouterStore();
let menuRouters = menuRoutersStore.menuRouters;

let $route = useRoute();
const routeBreadList = computed(() => {
  return $route.matched;
});

let settingStore = UseSettingStore();
const fold = computed(() => {
  return settingStore.fold;
});
const switchFold = () => {
  settingStore.switchFold();
};

let showPage = ref(true);
watch(
  () => settingStore.refresh,
  () => {
    showPage.value = false;
    nextTick(() => {
      showPage.value = true;
    });
  },
);
const refreshPage = () => {
  settingStore.onRefresh();
};
let isFull = ref(false);
isFull.value = !!document.fullscreenElement;
const fullScreen = () => {
  // DOM对象的一个属性：可以用来判断当前是不是全屏模式
  if (!isFull.value) {
    isFull.value = true;
    document.documentElement.requestFullscreen();
  } else {
    isFull.value = false;
    document.exitFullscreen();
  }
};

let isDark = ref(false);
const changeDark = () => {
  let html = document.documentElement;
  isDark.value = !isDark.value;
  html.className = isDark.value ? "dark" : "";
};

const $router = useRouter();
const userStore = UseUserStore();
const logout = async () => {
  userStore
    .userLogout()
    .then(() => {
      $router.push("/login?redirect=" + $route.path);
      ElNotification({
        title: "退出成功",
        type: "success",
      });
    })
    .catch((err) => {
      ElNotification({
        title: err.message,
        type: "error",
      });
    });
};
</script>

<template>
  <div class="layout_container" :class="{ 'slider-fold': fold }">
    <div class="layout_slider">
      <div class="logo-wrp" v-if="!setting.logoIsHidden">
        <img class="slider-logo" src="../assets/logo.png" />
        <span class="logo-text" v-if="!fold">{{ setting.title }}</span>
      </div>
      <el-scrollbar class="scroll-bar">
        <el-menu
          active-text-color="skyblue"
          background-color="#001529"
          class="el-menu-vertical-demo"
          text-color="#fff"
          :collapse="fold"
          :default-active="$route.path"
          router
          unique-opened
        >
          <template v-for="item in menuRouters" :key="item.path">
            <el-sub-menu :index="item.path" v-if="item.children">
              <template #title>
                <icon :icon="item.meta.icon"></icon>
                <span>{{ item.meta.title }}</span>
              </template>
              <template v-for="v in item.children" :key="v.path">
                <el-menu-item :index="v.path" v-if="!v?.meta?.hidden">
                  <icon :icon="v?.meta?.icon"></icon>
                  <template #title>
                    <span>{{ v?.meta?.title }}</span>
                  </template>
                </el-menu-item>
              </template>
            </el-sub-menu>
            <template v-else>
              <el-menu-item :index="item.path" v-if="!item.meta.hidden">
                <icon :icon="item.meta.icon"></icon>
                <template #title>
                  <span>{{ item.meta.title }}</span>
                </template>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
    <div class="layout_tabbar">
      <div class="tabbar_left">
        <icon
          class="fold-icon"
          :icon="fold ? 'Expand' : 'Fold'"
          :fontSize="22"
          @click="switchFold"
        ></icon>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            v-for="item in routeBreadList"
            :key="item.name"
            :to="item.path"
          >
            <icon :icon="item.meta.icon" :fontSize="15"></icon
            ><span>{{ item.meta.title }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="tabbar_right">
        <el-button
          type="default"
          size="small"
          icon="Refresh"
          circle
          @click="refreshPage"
        ></el-button>
        <el-button
          type="default"
          size="small"
          :icon="!isFull ? 'ZoomIn' : 'ZoomOut'"
          @click="fullScreen"
          circle
        ></el-button>
        <el-button
          type="default"
          size="small"
          :icon="isDark ? 'Moon' : 'Sunny'"
          circle
          @click="changeDark"
        ></el-button>
        <img src="../assets/logo.png" class="avatar" alt="" />
        <el-dropdown>
          <span class="el-dropdown-link">
            管理员
            <icon icon="arrow-down"></icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="layout_main">
      <router-view v-slot="{ Component }">
        <transition name="fade">
          <component :is="Component" v-if="showPage"></component>
        </transition>
      </router-view>
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout_container {
  width: 100%;
  height: 100vh;
  &.slider-fold {
    .layout_slider {
      width: $base-menu-fold-width;
    }
    .layout_tabbar,
    .layout_main {
      width: calc(100% - $base-menu-fold-width);
    }
  }
  .layout_slider {
    width: $base-menu-width;
    height: 100vh;
    background-color: $base-slider-backgroundColor;
    float: left;
    transition: width 0.3s;
    overflow: hidden;
    .logo-wrp {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: $base-menu-logo-height;
      .slider-logo {
        width: 40px;
        height: 40px;
        border-radius: 8px;
      }
      .logo-text {
        margin-left: 8px;
        font-size: 16px;
        color: #fff;
        white-space: nowrap;
      }
    }
    .scroll-bar {
      height: calc(100% - base-menu-logo-height);
      .el-menu {
        border-right: none;
      }
    }
  }
  .layout_tabbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: $base-tabbar-height;
    width: calc(100% - $base-menu-width);
    border-bottom: 1px solid #eee;
    float: left;
    transition: width 0.3s;
    .tabbar_left {
      display: flex;
      align-items: center;
      .fold-icon {
        cursor: pointer;
      }
      .el-breadcrumb {
        margin-left: 20px;
        :deep(.el-breadcrumb__inner) {
          display: flex;
          align-items: center;
          line-height: 1;
          .el-icon {
            margin-right: 4px;
          }
          span {
            margin-top: 1px;
          }
        }
      }
    }
    .tabbar_right {
      display: flex;
      align-items: center;
      .avatar {
        margin-left: 20px;
        margin-right: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .el-dropdown-link {
        cursor: default;
      }
    }
  }
  .layout_main {
    padding: 20px;
    height: calc(100vh - $base-tabbar-height);
    width: calc(100% - $base-menu-width);
    float: left;
    transition: width 0.3s;
    overflow: auto;
    .fade-enter-from {
      transform: translate3d(4px, 10px, 0) scale(0.95);
      opacity: 0;
    }
    .fade-enter-active {
      transition: all 0.3s;
    }
    .fade-enter-to {
      transform: translate3d(0px, 0, 0) scale(1);
      opacity: 1;
    }
  }
}
</style>
